1
00:00:00,340 --> 00:00:00,940
Okay.

2
00:00:00,940 --> 00:00:02,350
The next thing we need is script.

3
00:00:02,350 --> 00:00:06,610
Is the message guy handler inside of our starter player scripts.

4
00:00:06,610 --> 00:00:12,220
And this handler is going to be responsible for displaying typewriter style messages on the screen when

5
00:00:12,220 --> 00:00:13,780
told to by the server.

6
00:00:13,780 --> 00:00:17,800
So we have a guy in starter guy called our message guy.

7
00:00:18,370 --> 00:00:23,830
And if we enable the visibility here, it's going to have basically three main areas to this guy.

8
00:00:23,860 --> 00:00:27,430
One is it's going to display an image of the person who was talking.

9
00:00:27,430 --> 00:00:29,530
It's going to display their name down here.

10
00:00:29,530 --> 00:00:32,560
And then this section is where all the text is going to go.

11
00:00:32,560 --> 00:00:38,800
And a typewriter effect is basically when we have the text slowly displaying out like it's being typed

12
00:00:38,800 --> 00:00:40,840
while we play a sound effect with it.

13
00:00:40,840 --> 00:00:44,350
So you can imagine as if the text was being typed out like this.

14
00:00:44,860 --> 00:00:46,210
And it adds a nicer effect.

15
00:00:46,210 --> 00:00:50,980
When we're trying to give messages to the player, we're going to be using this message UI frame mainly

16
00:00:50,980 --> 00:00:56,050
just for our Squidward friend here, where he's going to be telling the players, uh, what to do and

17
00:00:56,050 --> 00:00:57,550
kind of stuff like that.

18
00:00:57,550 --> 00:01:02,350
So let me go ahead and disable visibility and let's get started in our message UI handler.

19
00:01:02,710 --> 00:01:05,260
So inside of here we're going to need three services.

20
00:01:05,260 --> 00:01:07,090
One is replicated storage.

21
00:01:08,030 --> 00:01:10,880
We are going to need the player service.

22
00:01:12,780 --> 00:01:15,330
And we're going to need the sound service.

23
00:01:18,940 --> 00:01:22,330
Now we can create the table that will represent this module script.

24
00:01:22,330 --> 00:01:25,510
We'll just call it GUI handler, return it at the end.

25
00:01:26,160 --> 00:01:28,620
And then we want to have a few variables.

26
00:01:28,620 --> 00:01:31,140
One is going to make a reference to the local player.

27
00:01:31,140 --> 00:01:33,630
So players dot local player.

28
00:01:34,910 --> 00:01:41,210
We want to make a reference to an event and replicated storage that will be used to tell our GUI handler

29
00:01:41,210 --> 00:01:46,940
when to display messages on the screen, so we can call it Message Event, and it's in replicated storage,

30
00:01:46,940 --> 00:01:50,570
dot events, dot remotes, dot message guy.

31
00:01:51,260 --> 00:01:58,490
We also want to refer to our cam manipulation Bindable event and replicated storage dot events, dot

32
00:01:58,490 --> 00:02:00,800
binding balls, dot manipulate camera.

33
00:02:01,280 --> 00:02:06,890
And this is because our camera is going to be manipulated by another script to put it here, where it's

34
00:02:06,890 --> 00:02:11,600
facing down at Squidward, and then it's going to tell this script to start displaying messages on the

35
00:02:11,600 --> 00:02:12,110
screen.

36
00:02:12,110 --> 00:02:17,000
When those messages are over, we want to reset the camera and put it back on the player.

37
00:02:17,000 --> 00:02:24,020
So we're going to use our cam manipulation bindable to tell our camera manipulation handler to put the

38
00:02:24,020 --> 00:02:26,000
player's camera back on their character.

39
00:02:26,560 --> 00:02:32,560
That means we're also going to have to require our camera manipulation enum.

40
00:02:33,980 --> 00:02:34,910
Which isn't replicated.

41
00:02:34,910 --> 00:02:35,510
Storage.

42
00:02:35,510 --> 00:02:36,200
Dot modules.

43
00:02:36,200 --> 00:02:36,830
Dot enums.

44
00:02:36,830 --> 00:02:38,600
Dot camera manipulation enum.

45
00:02:39,680 --> 00:02:44,960
Next is we're going to make a reference to a sound and the sound service, which is our typewriter sound.

46
00:02:45,260 --> 00:02:48,260
So that's an sound service guy.

47
00:02:48,260 --> 00:02:51,950
And oops, looks like I required the wrong service up here for some reason.

48
00:02:51,950 --> 00:02:54,320
We need the sound service, not the player service.

49
00:02:54,320 --> 00:02:56,660
So guy dot typewriter.

50
00:02:56,660 --> 00:02:58,940
So if we go inside of the sound service.

51
00:02:59,630 --> 00:03:03,980
This is the sound we're going to play every time we display a character on the screen.

52
00:03:03,980 --> 00:03:07,460
So just a simple click sound.

53
00:03:08,280 --> 00:03:12,930
And then lastly, we need to make a reference to the message guy itself, which is going to be in the

54
00:03:12,930 --> 00:03:17,160
local players player guy folder, and we want to wait for that to replicate.

55
00:03:18,320 --> 00:03:23,060
From this point, we can create the function that's going to initialize our GUI handler.

56
00:03:23,060 --> 00:03:26,690
And all this is going to do is listen to our message GUI event.

57
00:03:28,190 --> 00:03:31,040
And we're going to connect a private function to this.

58
00:03:31,040 --> 00:03:35,390
And we're going to call this private function on message event.

59
00:03:35,390 --> 00:03:37,550
And it'll get passed some arguments.

60
00:03:37,550 --> 00:03:43,280
So we don't need any actions for this because all this event is going to be used for is displaying messages

61
00:03:43,280 --> 00:03:43,850
on the screen.

62
00:03:43,850 --> 00:03:46,670
So we can connect it to our on message event function.

63
00:03:46,820 --> 00:03:51,140
And what this will do is it'll get our message UI.

64
00:03:51,780 --> 00:03:57,660
And inside of the frame of our message UI, there is an image label that will display the person who

65
00:03:57,660 --> 00:04:02,940
is talking and the server is going to give to us through our args table, the image that we need to

66
00:04:02,940 --> 00:04:08,850
set it to, so we can have a key inside of our args table like image, and set that to the image label

67
00:04:09,060 --> 00:04:14,610
inside of the message UI dot frame, dot image label dot name label we have in there.

68
00:04:14,610 --> 00:04:21,300
We want to set the text to the name of whoever is talking, so we can have another key that could say

69
00:04:21,300 --> 00:04:23,160
something like who is speaking?

70
00:04:23,160 --> 00:04:27,030
So this will give us a string of the name of the person that is talking.

71
00:04:27,450 --> 00:04:32,310
The next thing we want to do inside the message UI dot frame is a message label in there, and we want

72
00:04:32,310 --> 00:04:34,590
to set the text to be blank.

73
00:04:34,590 --> 00:04:38,820
And then we want to set the message UI dot frame dot visibility equal to true.

74
00:04:38,820 --> 00:04:40,410
So we can see it on our screen.

75
00:04:40,770 --> 00:04:45,540
And then from this point we can have a for loop that loops through every single text or message that

76
00:04:45,540 --> 00:04:47,250
is given to us in a table.

77
00:04:47,250 --> 00:04:51,780
So inside of our args table we could have another table, and we could call it something like a message

78
00:04:51,780 --> 00:04:52,410
table.

79
00:04:52,410 --> 00:04:55,950
And it will just contain an array of strings that we need to loop through.

80
00:04:56,040 --> 00:05:00,780
And then what we could do is we could loop through this text or through every single character in our

81
00:05:00,780 --> 00:05:01,350
text.

82
00:05:01,350 --> 00:05:07,800
So we could make a for loop, starting with an index of one all the way to the length of our text.

83
00:05:07,800 --> 00:05:16,260
And what we could do is we could set the message GUI dot frame, dot message label dot text equal to.

84
00:05:16,260 --> 00:05:24,900
And we're going to get a substring of this text starting at one all the way to the index of I, which

85
00:05:24,900 --> 00:05:26,910
will be from this for loop right here.

86
00:05:27,510 --> 00:05:30,750
And then we're going to play our typewriter sound.

87
00:05:31,770 --> 00:05:36,840
And then after that, we need to have a delay between each character that we're displaying on the screen

88
00:05:36,840 --> 00:05:38,400
so we can wait.

89
00:05:38,400 --> 00:05:42,090
And then the server could also pass to us how long we need to wait.

90
00:05:42,090 --> 00:05:47,760
So we could have another argument that could be like the delay between.

91
00:05:48,400 --> 00:05:50,380
Characters in a string.

92
00:05:50,870 --> 00:05:55,670
And then once it finally loops through the first string inside of this message table, then we need

93
00:05:55,670 --> 00:05:56,810
to go to the next string.

94
00:05:56,810 --> 00:06:02,090
But before we do that, we should have another wait statement outside of our second for loop before

95
00:06:02,090 --> 00:06:07,850
we move on to the next text, and we could have another key value pair in our args table that defines

96
00:06:07,850 --> 00:06:10,040
the delay we should have between the messages.

97
00:06:10,040 --> 00:06:13,400
So we could call it delay between messages.

98
00:06:13,790 --> 00:06:18,860
And then once we're done displaying all of the different messages on the screen, we can finally have

99
00:06:18,860 --> 00:06:25,760
one more key value pair in our args table that tells us whether or not the camera was manipulated or

100
00:06:25,760 --> 00:06:29,330
moved somewhere for this message to be displayed.

101
00:06:29,330 --> 00:06:34,820
So in our case, we're going to be moving the player's camera to this C frame of this part right here.

102
00:06:35,300 --> 00:06:38,750
And that's very important because we need to tell our message event function.

103
00:06:38,750 --> 00:06:41,420
If we need to reset the camera back to the player.

104
00:06:41,420 --> 00:06:46,370
So we could have a boolean like cam was manipulated for message.

105
00:06:46,370 --> 00:06:53,660
If this is true then we need to use our cam manipulation Bindable and fire using the action of camera

106
00:06:53,660 --> 00:06:57,470
manipulation enum dot two client dot reset camera.

107
00:06:57,470 --> 00:07:01,850
So we want to move the camera back to its original state, and then after that we can set the message

108
00:07:01,850 --> 00:07:05,750
UI dot frame dot visibility equal to false.

109
00:07:05,840 --> 00:07:09,710
And that's all we need to do for our message UI handler.

110
00:07:10,220 --> 00:07:15,560
Now we have all of these set up complete on the client side to start scripting our story in the next

111
00:07:15,560 --> 00:07:16,220
lecture.

112
00:07:16,340 --> 00:07:17,540
I'll see you there.